<template>
  <div class="dashboard-editor-container">
    <div class="img"><img :src="avatar" ></div>
    <span>欢迎</span>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
import GithubCorner from "@/components/GithubCorner";

export default {
  name: "DashboardEditor",
  components: { PanThumb, GithubCorner },
  data() {
    return {
      emptyGif:
        "https://upload-bbs.mihoyo.com/upload/2021/10/30/178187275/86db88bc4d87aaac9ec79620366ef67a_3021670767216492104.gif?x-oss-process=image//auto-orient,0/interlace,1/format,gif",
    };
  },
  computed: {
    ...mapGetters(["nickName", "avatar", "roles"]),
  },
};
</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}
.roles {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;
  .pan-info-roles {
    font-size: 50px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 200px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 200px;
      left: 500px;
    }
  }
}
</style>
